<template>
  <div class="article">
    <!--  -->
    <div class="header">
      <!-- 产品状态下拉框 -->
      <el-select v-model="articleStatus" clearable placeholder="状态">
        <el-option label="未审核" value="未审核"> </el-option>
        <el-option label="审核通过" value="审核通过"> </el-option>
        <el-option label="审核不通过" value="审核不通过"> </el-option>
        <el-option label="推荐" value="推荐"> </el-option>
      </el-select>
      <!-- 栏目标题输入框 -->
      <el-input
        style="width: 240px"
        placeholder="标题"
        v-model="articleName"
        clearable
      >
      </el-input>
      <!-- 栏目下拉框 -->
      <el-select v-model="articleCatgeory" clearable placeholder="请选择栏目">
        <el-option
          v-for="category in categoryData"
          :key="category.id"
          :label="category.name"
          :value="category.id"
        >
        </el-option>
      </el-select>
      <!-- 查询按钮 -->
      <el-button type="primary" @click="queryArticle">查询</el-button>
      <!-- 发布风采按钮 -->
      <el-button
        type="primary"
        style="float: right"
        @click="$router.push({ path: 'Publish' })"
        >发布风采</el-button
      >
    </div>
    <!-- 表格区域 -->
    <div class="table_content">
      <!-- :data整个表格的数据源 -->
      <el-table
        :data="articleData"
        style="width: 100%"
        @row-click="overallClick"
      >
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center" width="50">
        </el-table-column>
        <!-- 封面 -->
        <el-table-column label="封面" align="center" width="160">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              :src="scope.row.cover"
              :preview-src-list="[scope.row.cover]"
            ></el-image>
          </template>
        </el-table-column>
        <!-- 风采 -->
        <el-table-column label="风采">
          <template slot-scope="scope">
            <strong prop="title">{{ scope.row.title }}</strong>
            <p v-if="scope.row.baseUser">{{ scope.row.baseUser.realname }}</p>
            <p prop="categoryId">{{ scope.row.category.name }}</p>
            <p>{{ scope.row.publishTime | fmtDate_global }}</p>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == '审核通过'">
              {{ scope.row.status }}
            </el-tag>
            <el-tag type="warning" v-if="scope.row.status == '推荐'">
              {{ scope.row.status }}
            </el-tag>
            <el-tag type="info" v-if="scope.row.status == '未审核'">
              {{ scope.row.status }}
            </el-tag>
            <el-tag type="danger" v-if="scope.row.status == '审核不通过'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <!-- 推荐 -->
            <el-button
              @click.stop="recomArticle(scope.row.id)"
              type="text"
              size="small"
              style="color: #2cb5ac"
              >推荐</el-button
            >
            <!-- 审核 -->
            <el-button
              @click.stop="auditArticle(scope.row)"
              type="text"
              size="small"
              style="color: #3a71a8"
              >审核</el-button
            >
            <!-- 删除 -->
            <el-button
              @click.stop="deleteArticle(scope.row.id)"
              type="text"
              size="small"
              style="color: #e65d6e"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 7, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="提示" :visible.sync="auditDialog" width="60%">
      <!-- 文章内容 -->
      <div>
        <div style="text-align: center; font-size: 18px; line-height: 2em">
          {{ auditTitle }}
        </div>
        <div v-html="auditContent">{{ auditContent }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="failAudit">审核不通过</el-button>
        <el-button type="primary" @click="successAudit">审核通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入axios
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      // 文章数组 表格的数据源
      articleData: [],
      // 文章栏目类别
      categoryData: [],
      // 文章状态
      articleStatus: "",
      // 文章标题
      articleName: "",
      // 文章栏目
      articleCatgeory: "",
      // 当前页码
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 10,
      // 页面展示数据的总条数
      total: 10,
      // 定义一个查询的参数
      queryData: {},
      // 是否显示对话框
      auditDialog: false,
      // 审核框文章标题
      auditTitle: "",
      // 审核框文章内容
      auditContent: "",
      // 审核id
      auditId: "",
    };
  },
  computed: {},
  methods: {
    //获取所有文章的数据
    async getAllArticleData() {
      // 获取参数
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      // 通过对应的参数发送网络请求 获取产品数组数据
      let res = await get("/article/pageQuery", { ...data, ...this.queryData });
      console.log(res.data.list);
      // 将data中的产品数组 进行赋值
      this.articleData = res.data.list;
      // 页面总数据条数
      this.total = res.data.total;
    },
    // 获取所有文章的栏目类型
    async getAllCategoryData() {
      let res = await get("/category/findAll");
      this.categoryData = res.data;
    },
    // 根据条件模糊查询文章信息
    queryArticle() {
      let data = {
        title: this.articleName,
        status: this.articleStatus,
        categoryId: this.articleCatgeory,
      }; // 格式化参数 当某个属性没有值的时候 将其删除掉
      for (const key in data) {
        if (!data[key]) {
          delete data[key];
        }
      }
      // // 将参数赋值给querydata
      this.queryData = data;
      // // 将页数强制回到第一页
      this.currentPage = 1;
      // // 重新加载产品数据
      this.getAllArticleData();
    },
    // 推荐文章
    recomArticle(id) {
      this.$confirm("你确认推荐此咨讯吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = {
            id,
            status: "推荐",
          };
          let res = await post("/article/changeStatus", data);
          this.$message({
            type: "success",
            message: res.message,
          });
          this.getAllArticleData();
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消推荐",
          // });
        });
    },
    // 审核文章
    auditArticle(row) {
      this.auditDialog = true;
      console.log(row);
      this.auditTitle = row.title;
      this.auditContent = row.content;
      this.auditId = row.id;
    },
    // 审核不通过
    async failAudit() {
      let data = {
        id: this.auditId,
        status: "审核不通过",
      };
      let res = await post("/article/changeStatus", data);
      // 给用户成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.auditDialog = false;
        // 重新刷新页面
        this.getAllArticleData();
      } else {
        this.$message.error(res.message);
      }
    },
    // 审核通过
    async successAudit() {
      let data = {
        id: this.auditId,
        status: "审核通过",
      };
      let res = await post("/article/changeStatus", data);
      // 给用户成功或失败的提示
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.auditDialog = false;
        // 重新刷新页面
        this.getAllArticleData();
      } else {
        this.$message.error(res.message);
      }
    },
    // 删除文章
    deleteArticle(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await get("/article/deleteById", { id });
          this.$message({
            type: "success",
            message: res.message,
          });
          this.getAllArticleData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 控制每页要展示的数据条数
    handleSizeChange(val) {
      // 将每页数据的条数进行更新
      this.pageSize = val;
      this.getAllArticleData();
    },
    // 控制当前显示的页数
    handleCurrentChange(val) {
      // 将当前页数与分页插件动态点击控制页数相绑定
      this.currentPage = val;
      // 重新调用获取所有产品的数据
      this.getAllArticleData();
    },
    // 点击当前行
    overallClick(row) {
      this.$router.push({ 
        path: 'Details',
        query:{
          id:row.id,
        } 
      })
    },
  },
  created() {
    this.getAllArticleData();
    this.getAllCategoryData();
  },
  mounted() {},
};
</script>
<style scoped>
</style>